<!--
 * @Description: 坐标定位组件
 * @Version: 2.0
 * @Autor: GerhardYang
 * @Date: 2019-04-16 22:31:37
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-09-16 16:46:22
 -->
<template>
  <a-form class="form" style="border: 1px solid #d9d9d9">
    <a-form-item
      label="经度"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-input-number size="small" v-model="xyz1" style="width: 180px" />
    </a-form-item>
    <a-form-item
      label="纬度"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-input-number size="small" v-model="xyz2" style="width: 180px" />
    </a-form-item>
    <a-form-item
      label="级别"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-input-number size="small" v-model="zoom" :min="0" :max="20" />
    </a-form-item>
    <a-form-item
      label="操作"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-button type="primary" style="width: 60px" size="small" @click="flyto"
        >确定</a-button
      >
      <a-button type="default" style="width: 60px" size="small" @click="reset"
        >重置</a-button
      >
    </a-form-item>
  </a-form>
</template>

<script>
import L from "leaflet";
import { wgs84togcj02 } from "@/utils/CoordinateTransform.js";
export default {
  props: {
    mapXyz: {
      type: Object,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
      xyz1: this.mapXyz.center[1],
      xyz2: this.mapXyz.center[0],
      zoom: this.mapXyz.zoom,
    };
  },

  computed: {
    map() {
      return this.$store.state.map;
    },
  },

  mounted() {},
  beforeDestroy() {
    this.marker.remove();
  },
  methods: {
    reset() {
      this.xyz1 = this.mapXyz.center[1];
      this.xyz2 = this.mapXyz.center[0];
      this.zoom = this.mapXyz.zoom;
      this.marker.remove();
    },
    flyto() {
      this.marker ? this.marker.remove() : "";
      let latlng = [this.xyz2, this.xyz1];
      console.log("坐标", latlng);
      latlng = wgs84togcj02(parseFloat(this.xyz1), parseFloat(this.xyz2));
      console.log("真实坐标偏移后坐标", latlng);
      let pulseIcon = L.icon.pulse({
        iconSize: [14, 14],
        color: "#1890fe",
      });
      this.marker = L.marker([parseFloat(latlng[1]), parseFloat(latlng[0])], {
        icon: pulseIcon,
      }).addTo(this.map);
      this.map.flyTo([parseFloat(latlng[1]), parseFloat(latlng[0])], this.zoom);
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;

  /deep/.ant-form-item {
    margin-bottom: 10px !important;
  }
  .ant-btn-primary {
    // margin-left: 30px;
    width: 90px;
  }
  .ant-btn-default {
    margin-left: 25px;
    width: 90px;
  }
}
</style>
